import Vue from 'vue'
import Vuex from 'vuex'
/* import axios from 'axios' */
import createPersistedstate from 'vuex-persistedstate'

Vue.use(Vuex)

const text = JSON.parse(localStorage.getItem('text'))
export default new Vuex.Store({
  state: {
    list: [],
    inputValue: '',
    viewkey: 'all'
  },
  plugins: [
    createPersistedstate({
      key: 'text',
      paths: ['list', 'viewkey']
    })
  ],
  mutations: {
    initList(state) {
      state.list = text.list
    },
    setInputChange(state, val) {
      state.inputValue = val;
    },
    addele(state) {
      const obj = {
        id: state.list.length,
        info: state.inputValue.trim(),
        done: false
      };
      state.list.push(obj)
    },
    delele(state, index) {
      const i = state.list.findIndex(item => item.id === index)
      /* console.log(i); */
      state.list.splice(i, 1)
    },
    changebox(state, fuxuan) {
      const i = state.list.findIndex(item => item.id === fuxuan.id)
      state.list[i].done = fuxuan.status
    },
    cleardone(state) {
      state.list = state.list.filter(item => item.done === false)
    },
    listchange(state, key) {
      state.viewkey = key;
    }
  },
  getters: {
    undonelength(state) {
      return state.list.filter(item => item.done === false)
        .length
    },
    showlist(state) {
      if (state.viewkey === 'all') {
        return state.list
      } else if (state.viewkey === 'undone') {
        return state.list.filter(item => item.done === false)
      } else {
        return state.list.filter(item => item.done === true)
      }
    }
  },
  modules: {
  }
})
